Reference Line Chart

Shows trends with a reference line to highlight key thresholds or benchmarks. This provides a visual context for interpreting the data and identifying deviations from expected values. It is useful for analyzing performance against targets, identifying outliers, or understanding the impact of interventions.

Chart:

Code:

const { muze, getDataFromSearchQuery } = viz;

const data = getDataFromSearchQuery();

const RowField = "Horsepower";
const ColumnField = "Year";
const TickColor = "#3f3d3e";
const ColorRange = ["#fdd8d4", "#fb8072"];

muze
  .canvas()
  .columns([ColumnField])
  .rows([RowField])
  .transform({
    averageLine: function (dt) {
      return dt.groupBy(
        [],
        [
          {
            aggn: muze.DataModel.AggregationFunctions.AVG,
            field: ColumnField,
          },
        ],
      );
    },
  })
  .layers([
    {
      mark: "bar",
      encoding: {
        x: RowField,
        y: ColumnField,
        color: {
          value: () => ColorRange[0],
        },
      },
    },
    {
      mark: "tick",
      encoding: {
        x: {
          field: null,
        },
        y: ColumnField,
        color: {
          value: TickColor,
        },
      },
      source: "averageLine",
    },
  ])
  .config({
    interactions: {
      tooltip: {
        includeDataFromAllLayers: true,
      },
    },
    autoGroupBy: {
      disabled: true,
    },
    legend: {
      color: {
        range: ColorRange,
      },
    },
  })
  .data(data)
  .mount("#chart"); // mount your chart